<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>23Vue中多个元素或组件的过渡</title>
    <script src="./vue.js"></script>
    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0
        }

        .v-enter-active,
        .v-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--out-in 先隐藏再显示 in-out 相反 -->

        <transition mode="out-in">
            <component :is="type"></component>
            <!-- <child v-if="show"></child>
            <child-one v-else></child-one> -->
        </transition>
        <!-- <button @click="show = !show">change</button> -->
        <button @click="handleClick">change</button>
    </div>
    <script>
        Vue.component('child', {
            template: '<div>child</div>'
        })
        Vue.component('child-one', {
            template: '<div>child-one</div>'
        })
        var vm = new Vue({
            el: "#app",
            data: {
                // show: true
                type: 'child'
            },
            methods: {
                handleClick: function () {
                    this.type = this.type === 'child' ? 'child-one' : 'child'
                }
            }
        })
    </script>
</body>

</html>